<template>
  <Modal class="recLeadsContainer" v-model="recLeadsModal" width="545" :transfer="false" :mask-closable="false"
         :closable="false">
    <p slot="header">
      <span>推荐Leads</span>
      <i class="close" @click="close">
        <img src="../assets/images/close2.png" alt="关闭">
      </i>
    </p>
    <div class="cwBody">
      <Form ref="formItem" class="formItem" :model="formItem" :rules="ruleValidate" :label-width="90"
            label-position="left">
        <FormItem prop="name" label="学生姓名:" class="leadsName">
          <Input v-model="formItem.name" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem prop="mobile" label="手机号码:" class="leadsPhone">
          <Input v-model="formItem.mobile" placeholder="请输入手机号码"></Input>
        </FormItem>
        <FormItem prop="grade" label="年级:" class="subject">
          <Select v-model="formItem.grade" placeholder="请选择年级">
            <Option
              v-for="(item,index) in gradeList" :key="index" :value="item.key">{{item.value}}</Option>
          </Select>
        </FormItem>
        <FormItem prop="subject" label="科目:" class="subject">
          <Select v-model="formItem.subject" placeholder="请选择科目">
            <Option v-for="(item,index) in subjectList" :key="index" :value="item.key">{{item.value}}</Option>
          </Select>
        </FormItem>
        <Form-item label="渠道" prop="market_event_code">
          <Select v-model="formItem.market_event_code" filterable style="width:200px" placeholder="请选择渠道">
            <Option v-for="(item,index) in channelList" :key='index' :value="item.uuid">{{item.name}}</Option>
          </Select>
        </Form-item>
        <FormItem prop="recommend_type" label="推荐类型:" class="introducer">
          <RadioGroup v-model="formItem.recommend_type">
            <Radio label="inner">在读生推荐</Radio>
            <Radio label="outer">非在读生推荐</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="referrer_mobile" label="转介绍人:" class="introducer" >
          <Input v-model="formItem.referrer_mobile" placeholder="请填写转介绍人手机号"></Input>
          <!--<Input v-model="formItem.referrer_mobile" placeholder="请填写转介绍人手机号" @on-blur="introducer"></Input>-->
        </FormItem>
        <!--<FormItem prop="recommendCcUuid" label="推荐CC:" class="CC">-->
          <!--<Select v-model="formItem.recommendCcUuid" placeholder="请选择CC" filterable @on-change="chooseCC">-->
            <!--<Option v-for="(item,index) in CCList" :value="item.uuid" :key="index">{{item.name}}</Option>-->
          <!--</Select>-->
        <!--</FormItem>-->
        <!--<FormItem prop="recommendCrUuid" label="推荐CR:" class="CR">-->
          <!--<Select v-model="formItem.recommendCrUuid" placeholder="请选择CR" filterable @on-change="chooseCR">-->
            <!--<Option v-for="(item,index) in CRList" :value="item.uuid" :key="index">{{item.name}}</Option>-->
          <!--</Select>-->
        <!--</FormItem>-->

        <FormItem prop="remark" label="备注:" class="remark">
          <textarea cols="10" v-model="formItem.remark" placeholder=""></textarea>
        </FormItem>
      </Form>
      <div class="foot">
        <p class="submit" @click="handleSubmit('formItem')">
          提交</p>
        <p class="cancle" @click="close">关闭</p>
      </div>
    </div>
  </Modal>
</template>
<style lang="less">
  @import '../style/recLeads.less';
</style>
<script>
  import RULE from '@/common/js/infoRule';
  import {apiBase3} from '@/common/js/api.config';
  //    验证11位数字，且开头是1
  let mobileReg = /^1\d{10}$/;
  export default {
    data() {
      return {
        channelList:[
          {
            uuid:"MGQT6RK1IK",
            name:"TR推荐"
          },
          {
            uuid:"EDDJ9RBMGM",
            name:"推荐-合肥老师"
          }
        ],
        recommend_type: 1,
        // getAllSubjectUrl: this.$store.state.getAllSubject,
        // getAllChannelUrl: this.$store.state.getAllChannel,
        // getAllCCUrl: this.$store.state.getAllCC,
        // getAllCCUrl2: this.$store.state.getAllCC2,
        // getAllCRUrl: this.$store.state.getAllCR,
        recLeadsUrl: this.$store.state.recLeads,
        getFieldOptionsAPI: this.$store.state.getFieldOptions, //获取select选项api
        recommendCcUuid: "",
        gradeList: [],
        subjectList: [],
        CCList: [],
        CRList: [],
        formItem: {
          teacher_mobile:"",
          name: "",
          mobile: "",
          grade: "",
          subject: "",
          market_event_code: "",
          referrer_mobile: "",
          remark: "",
          recommend_type: "inner",
        },
        ruleValidate: {
          name: [
            {required: true, validator: RULE().validateName, trigger: 'blur'}
          ],
          mobile: [
            {required: true, validator: RULE().validatePhone, trigger: 'blur'}
          ],
          referrer_mobile: [
            {required: true, validator: RULE().validatePhone, trigger: 'blur'}
          ],
          recommend_type: [
            { required: true, message: '请选择推荐类型', trigger: 'change'}
          ],
          grade: [
            {required: true, message: '请选择年级', trigger: 'change'}
          ],
          subject: [
            {required: true, message: '请选择科目', trigger: 'change'}
          ],
          market_event_code: [
            {required: true, message: '请选择', trigger: 'change'}
          ],
        },
        formItem2: {
          leadsName: "",
          leadsPhone: "",
          grade: "",
          subject: "",
          channelUuid: "",
          recommendCcUuid: "",
          recommendCcName: "",
          recommendCrUuid: "",
          recommendCrName: "",
          introducer: "",
          remark: "",
          recType: 1,
        },
        ruleValidate2: {
          leadsName: [
            {required: true, validator: RULE().validateName, trigger: 'blur'}
          ],
          leadsPhone: [
            {required: true, validator: RULE().validatePhone, trigger: 'blur'}
          ],
          introducer: [
            {required: true, validator: RULE().validatePhone, trigger: 'blur'}
          ],
          recType: [
            {type: "number", required: true, message: '请选择推荐类型', trigger: 'change'}
          ],
          grade: [
            {required: true, message: '请选择年级', trigger: 'change'}
          ],
          subject: [
            {required: true, message: '请选择科目', trigger: 'change'}
          ],
          channelUuid: [
            {required: true, message: '请选择', trigger: 'change'}
          ],
          recommendCcUuid: [
            {required: true, message: '请选择推荐CC', trigger: 'change'}
          ],
          recommendCrUuid: [
            {required: true, message: '请选择推荐CR', trigger: 'change'}
          ],
        },
        recLeadsModal: true,
      }
    },
    filters: {},
    mounted() {
      // this.getAllSubject();
      // this.getAllCR();
      // this.getAllChannel();
      let option = {
        field: [
          'grade',
          'subject',
        ]
      }
      this.getOptions(option);
      this.getPhone();

    },
    watch: {},
    methods: {
      getPhone () {  //获取用户手机号
        this.$axios.get(this.$store.state.getUserPhone,{
          loading:false,
        }).then( res => {
          let phoneData = res.data.data;
          this.formItem.teacher_mobile = phoneData;
        })
      },
      getOptions(option) {
        //获取select选项
        this.$axios.post(this.getFieldOptionsAPI, option,{
          baseURL: apiBase3(),
        }).then(res => {
          console.log(res.data.data)
          if (res.data.data.subject) {
            this.gradeList = res.data.data.grade
            this.subjectList = res.data.data.subject;
          }
        })
      },
      introducer() {//转介绍人输入完毕，根据推荐类型改变ccList

        if (!mobileReg.test(this.formItem.introducer)){
          return false;
        }
        console.log(111);
        if (this.formItem.recType == 1) {
          this.getAllCC2();
        }
        else if (this.formItem.recType == 2) {
          this.getAllCC();
        }
      },
      chooseCC(value) {
        let obj = {};
        obj = this.CCList.find((item) => {//这里的userList就是上面遍历的数据源
          return item.uuid === value;//筛选出匹配数据
        });
        console.log(obj.name);//我这边的name就是对应label的
        this.formItem.recommendCcName = obj.name;
      },
      chooseCR(value) {
        let obj = {};
        obj = this.CRList.find((item) => {//这里的userList就是上面遍历的数据源
          return item.uuid === value;//筛选出匹配数据
        });
        console.log(obj.name);//我这边的name就是对应label的
        this.formItem.recommendCrName = obj.name;
      },
//      关闭弹窗
      close() {
        this.$store.commit("RECOMMND_LEADS", "false");
        this.recLeadsModal = false;
      },
      //获取所有科目
      getAllSubject() {
        this.$axios.get(this.getAllSubjectUrl)
          .then(res => {
            this.subjectList = res.data.data;
          })
      },
      //获取所有渠道
      getAllChannel() {
        this.$axios.get(this.getAllChannelUrl)
          .then(res => {
            this.channelList = res.data.data.channelList;
          })
      },
      //根据转介绍人获取所有CC
      getAllCC2() {
        this.$axios.post(this.getAllCCUrl2,{
          phone:this.formItem.introducer
        })
          .then(res => {
            this.CCList = res.data.data;
            if(this.CCList.length==0){
              this.getAllCC();
            }
          })
      },
      //获取所有CC
      getAllCC() {
        this.$axios.get(this.getAllCCUrl)
          .then(res => {
            this.CCList = res.data.data;
          })
      },
      //获取所有CR
      getAllCR() {
        this.$axios.get(this.getAllCRUrl)
          .then(res => {
            this.CRList = res.data.data;
          })
      },
//      点击提交
      handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios.post(this.recLeadsUrl, this.formItem,{
              baseURL: apiBase3(),
            }).then(res => {
              console.log(res);
              if (res.data.status == 'success'){
                this.$Message.success('推荐成功！');
                this.$refs['formItem'].resetFields();
                this.close();
              } else {
                this.$Message.error(res.data.message);
              }

            }).catch(error => {
//                  this.$Message.error('调课失败！请重新提交');
            });
          }
        })
      },
    },
    destroyed() {
    }
  }
</script>

